<template>
  <div
    id="zq-egg-overlay"
    :class="{ show: visible }"
    aria-hidden="true"
    @click="handleOverlayClick"
  >
    <canvas id="zq-egg-confetti"></canvas>
    <div
      class="egg-modal"
      role="dialog"
      aria-modal="true"
      aria-labelledby="egg-title"
      :class="shakeClass"
      @click="handleModalClick"
    >
      <div class="crown" aria-hidden="true"></div>
      <h1 id="egg-title" class="egg-title">赵光强万岁！</h1>
      <p class="egg-sub">Long live Zhao Guangqiang!</p>
      <div class="sparkle" aria-hidden="true"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EasterEggModal',
  data() {
    return {
      visible: false,
      shakeClass: '',
      confetti: [],
      running: false,
      rafId: null,
      autoCloseTimer: null,
    }
  },
  mounted() {
    this.initCanvas()
    this.placeSparkles()
    this.setupEventListeners()
  },
  beforeUnmount() {
    this.cleanup()
  },
  methods: {
    show() {
      this.visible = true
      document.body.style.overflow = 'hidden'
      this.placeSparkles()
      this.launchConfetti()
      this.hardShake()

      // 10秒后自动关闭
      this.autoCloseTimer = setTimeout(() => {
        this.close()
      }, 10000)
    },

    close() {
      this.visible = false
      document.body.style.overflow = ''
      this.shakeClass = ''
      this.running = false
      if (this.rafId) {
        cancelAnimationFrame(this.rafId)
        this.rafId = null
      }
      if (this.autoCloseTimer) {
        clearTimeout(this.autoCloseTimer)
        this.autoCloseTimer = null
      }
    },

    handleOverlayClick(e) {
      // 点击空白区域不关闭，只触发抖动
      this.hardShake()
    },

    handleModalClick(e) {
      // 点击弹窗内容也触发抖动
      this.hardShake()
    },

    hardShake(ms = 1600) {
      this.shakeClass = 'shake-hard'
      setTimeout(() => {
        this.shakeClass = 'shake-soft'
      }, ms)
    },

    initCanvas() {
      const canvas = document.getElementById('zq-egg-confetti')
      if (canvas) {
        this.canvas = canvas
        this.ctx = canvas.getContext('2d')
        this.resizeCanvas()
      }
    },

    resizeCanvas() {
      if (!this.canvas) return
      const dpr = Math.max(1, window.devicePixelRatio || 1)
      this.canvas.width = this.canvas.clientWidth * dpr
      this.canvas.height = this.canvas.clientHeight * dpr
      this.ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
    },

    placeSparkles(n = 32) {
      const sparkle = document.querySelector('.sparkle')
      if (!sparkle) return

      sparkle.innerHTML = ''
      const modal = document.querySelector('.egg-modal')
      if (!modal) return

      const rect = modal.getBoundingClientRect()
      for (let i = 0; i < n; i++) {
        const star = document.createElement('i')
        const x = Math.random() * rect.width
        const y = Math.random() * rect.height
        star.style.left = `${x}px`
        star.style.top = `${y}px`
        star.style.opacity = 0.6 + Math.random() * 0.4
        star.style.animation = `twinkle ${
          1 + Math.random() * 1.5
        }s ease-in-out ${Math.random()}s infinite`
        sparkle.appendChild(star)
      }
    },

    launchConfetti(duration = 2400, count = 180) {
      if (!this.canvas) return

      this.resizeCanvas()
      this.confetti.length = 0
      this.running = true

      const colors = ['#ff3b9d', '#7cf7ff', '#8efc7d', '#ffd26f', '#a586ff', '#ff7043', '#29b6f6']

      for (let i = 0; i < count; i++) {
        this.confetti.push({
          x: this.canvas.clientWidth * Math.random(),
          y: -10 - Math.random() * 80,
          w: 6 + Math.random() * 7,
          h: 8 + Math.random() * 10,
          vx: -3 + Math.random() * 6,
          vy: 4 + Math.random() * 3,
          g: 0.12 + Math.random() * 0.25,
          rot: Math.random() * Math.PI,
          vr: -0.25 + Math.random() * 0.5,
          color: colors[(Math.random() * colors.length) | 0],
        })
      }

      const start = performance.now()
      const frame = now => {
        if (!this.running) {
          this.ctx.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight)
          return
        }

        this.rafId = requestAnimationFrame(frame)
        const t = now - start

        this.ctx.clearRect(0, 0, this.canvas.clientWidth, this.canvas.clientHeight)

        this.confetti.forEach(p => {
          p.vy += p.g
          p.x += p.vx
          p.y += p.vy
          p.rot += p.vr

          if (p.y > this.canvas.clientHeight + 40) {
            p.y = -20
            p.vy *= -0.2
          }

          this.ctx.save()
          this.ctx.translate(p.x, p.y)
          this.ctx.rotate(p.rot)
          this.ctx.fillStyle = p.color
          this.ctx.fillRect(-p.w / 2, -p.h / 2, p.w, p.h)
          this.ctx.restore()
        })

        if (t > duration) {
          this.running = false
          cancelAnimationFrame(this.rafId)
        }
      }

      frame(start)
    },

    setupEventListeners() {
      const handleKeydown = e => {
        if (!this.visible) return

        // 移除ESC关闭功能，只保留S键抖动
        if (e.key.toLowerCase() === 's') {
          this.hardShake()
        }
      }

      const handleResize = () => {
        this.resizeCanvas()
      }

      window.addEventListener('keydown', handleKeydown)
      window.addEventListener('resize', handleResize)

      this.cleanup = () => {
        window.removeEventListener('keydown', handleKeydown)
        window.removeEventListener('resize', handleResize)
      }
    },
  },
}
</script>

<style scoped>
/* 全局样式变量 */
:root {
  --bg: #070b14;
  --panel: #0b1022;
  --panel-2: #0d1430;
  --accent: #ff3b9d;
  --accent-2: #7cf7ff;
  --gold: #ffd700;
  --white: #ffffff;
}

/* Overlay */
#zq-egg-overlay {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  z-index: 9999;
  background: radial-gradient(1200px 800px at 50% -10%, rgba(255, 255, 255, 0.15), transparent 60%),
    radial-gradient(900px 600px at 80% 120%, rgba(0, 255, 255, 0.1), transparent 65%), #00000080;
  backdrop-filter: blur(10px) saturate(140%);
}

#zq-egg-overlay.show {
  display: grid;
  animation: overlay-in 0.4s ease-out both;
}

@keyframes overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal 面板 */
.egg-modal {
  position: relative;
  max-width: min(920px, 92vw);
  padding: 56px 64px;
  border-radius: 28px;
  text-align: center;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02))
      padding-box,
    conic-gradient(from 0deg, #ff5ac3, #7cf7ff, #8efc7d, #ffd26f, #ff5ac3) border-box;
  border: 2px solid transparent;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  animation: pop 0.45s cubic-bezier(0.2, 1, 0.2, 1) both, border-spin 6s linear infinite;
}

@keyframes pop {
  from {
    transform: translateY(20px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes border-spin {
  to {
    filter: hue-rotate(360deg);
  }
}

/* 发光流彩外晕 */
.egg-modal::after {
  content: '';
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: inherit;
  filter: blur(18px) saturate(140%);
  background: conic-gradient(
    from 0deg,
    rgba(255, 90, 195, 0.55),
    rgba(124, 247, 255, 0.55),
    rgba(142, 252, 125, 0.55),
    rgba(255, 210, 111, 0.55),
    rgba(255, 90, 195, 0.55)
  );
  animation: spin 8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Title 文案 */
.egg-title {
  margin: 0 0 6px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  font-size: clamp(40px, 6.5vw, 96px);
  background: linear-gradient(
    180deg,
    #fff 0%,
    #fff 20%,
    #ffe58a 45%,
    #ffb347 60%,
    #ffd700 75%,
    #fff 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 28px rgba(255, 234, 138, 0.45), 0 0 60px rgba(255, 179, 71, 0.22),
    0 2px 0 rgba(0, 0, 0, 0.35);
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.28));
  animation: title-shine 3.2s ease-in-out infinite;
}

@keyframes title-shine {
  0%,
  100% {
    letter-spacing: 0.06em;
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
  }
  50% {
    letter-spacing: 0.1em;
    filter: drop-shadow(0 0 18px rgba(255, 215, 0, 0.55));
  }
}

.egg-sub {
  margin: 0 0 2px;
  color: #cbd5ff;
  font-size: clamp(14px, 1.8vw, 18px);
  opacity: 0.85;
}

/* 皇冠与星芒装饰 */
.crown {
  display: inline-block;
  width: 86px;
  height: 58px;
  vertical-align: middle;
  margin-bottom: 8px;
  position: relative;
}

.crown:before,
.crown:after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
}

.crown:before {
  top: 6px;
  width: 86px;
  height: 40px;
  background: radial-gradient(circle at 50% 0, #fff 0 6px, transparent 7px),
    conic-gradient(from 210deg at 50% 100%, #ffd86b 0 120deg, #ffae00 0 240deg, #ffd86b 0 360deg);
  clip-path: polygon(6% 100%, 18% 20%, 34% 100%, 50% 18%, 66% 100%, 82% 20%, 94% 100%);
}

.crown:after {
  bottom: -2px;
  width: 64px;
  height: 12px;
  background: linear-gradient(90deg, #ffd86b, #fff4b6, #ffd86b);
  box-shadow: 0 0 16px rgba(255, 216, 107, 0.6);
}

/* Shake 动画 */
@keyframes brutal-shake {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  10% {
    transform: translate(10px, -6px) rotate(1deg);
  }
  20% {
    transform: translate(-12px, 8px) rotate(-1.6deg);
  }
  30% {
    transform: translate(8px, 4px) rotate(0.8deg);
  }
  40% {
    transform: translate(-9px, -10px) rotate(-1.2deg);
  }
  50% {
    transform: translate(12px, 2px) rotate(1.4deg);
  }
  60% {
    transform: translate(-6px, 8px) rotate(-0.8deg);
  }
  70% {
    transform: translate(10px, -4px) rotate(1.2deg);
  }
  80% {
    transform: translate(-12px, 6px) rotate(-1.4deg);
  }
  90% {
    transform: translate(8px, -8px) rotate(1.1deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

@keyframes mild-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(2px, -2px);
  }
}

.shake-hard {
  animation: pop 0.45s cubic-bezier(0.2, 1, 0.2, 1) both, brutal-shake 0.55s steps(2) infinite;
}

.shake-soft {
  animation: pop 0.45s cubic-bezier(0.2, 1, 0.2, 1) both, mild-shake 0.8s ease-in-out infinite;
}

/* 弹窗点击区域 */
.egg-modal {
  cursor: pointer;
}

/* 星屑装饰 */
.sparkle {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}

.sparkle i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 255, 255, 0.1) 65%, transparent 70%);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.8);
}

.sparkle i:nth-child(odd) {
  width: 4px;
  height: 4px;
}

/* Confetti Canvas */
#zq-egg-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 弹窗内容样式调整 */
.egg-modal {
  cursor: pointer;
  user-select: none;
}

/* 星屑闪烁动画 */
@keyframes twinkle {
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
}
</style>
